<template>
  <!-- 循环 carList.arr，key 使用唯一的 carId -->
  <li v-for="item in carList.arr" :key="item.carId" class="waitcar-card">
    <div class="card-custom">
      <div class="row align-center">
        <div class="icon-col">
          <!-- 蓝色炫酷小车SVG图标 -->
          <svg class="car-icon" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="6" y="20" width="36" height="12" rx="6" fill="#2196F3"/>
            <rect x="10" y="14" width="28" height="10" rx="5" fill="#64B5F6"/>
            <circle cx="14" cy="36" r="4" fill="#1976D2"/>
            <circle cx="34" cy="36" r="4" fill="#1976D2"/>
            <rect x="18" y="18" width="12" height="6" rx="2" fill="#BBDEFB"/>
          </svg>
        </div>
        <div class="info-col">
          <!-- 车辆ID -->
          <div class="UserID">车辆ID: <span class="id-highlight">{{ item.carId }}</span></div>
          <!-- 所属区域/充电桩 -->
          <div class="tags">
            <span class="tag area">车辆总容量: {{ item.carCapacity }}</span>
            <span class="tag pile">充电桩: {{ item.pileId }}</span>
          </div>
          <!-- 进入等候区时间 -->
          <div class="QueueingTime">请求充电量：{{ item.requestAmount }}</div>
        </div>
      </div>
    </div>
  </li>
</template>


<script>

export default {
    name: "WaitCar1",
    props: {
        carList: {
            type: Object,
            required: true,
        },
    },
}
</script>


<style scoped>
.waitcar-card {
  list-style: none;
  margin-bottom: 24px;
}
.card-custom {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(33, 150, 243, 0.15), 0 1.5px 4px 0 rgba(33, 150, 243, 0.10);
  transition: box-shadow 0.3s, transform 0.3s;
  padding: 18px 28px;
  display: flex;
  align-items: center;
}
.card-custom:hover {
  box-shadow: 0 8px 32px 0 rgba(33, 150, 243, 0.25), 0 3px 8px 0 rgba(33, 150, 243, 0.18);
  transform: translateY(-2px) scale(1.02);
}
.row {
  display: flex;
  align-items: center;
}
.icon-col {
  flex: 0 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.car-icon {
  width: 48px;
  height: 48px;
  display: block;
}
.info-col {
  flex: 1;
  margin-left: 18px;
}
.UserID {
  font-weight: bold;
  font-size: 20px;
  color: #1565c0;
  margin-bottom: 6px;
}
.id-highlight {
  color: #1976d2;
  background: #e3f2fd;
  border-radius: 6px;
  padding: 2px 8px;
}
.tags {
  margin-bottom: 6px;
}
.tag {
  display: inline-block;
  font-size: 13px;
  border-radius: 8px;
  padding: 2px 10px;
  margin-right: 8px;
  color: #fff;
}
.area {
  background: #42a5f5;
}
.pile {
  background: #1976d2;
}
.QueueingTime {
  font-size: 13px;
  color: #607d8b;
}
</style>